<!doctype html>
<html lang="zh-CN">
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="referrer" content="no-referrer-when-downgrade">
    

    <title>Getx | 早起的年轻人</title>
    <meta property="og:title" content="Getx - 早起的年轻人">
    <meta property="og:type" content="article">
        
    <meta property="article:published_time" content='2021-08-19T23:10:11&#43;08:00'>
        
        
    <meta property="article:modified_time" content='2021-08-19T23:10:11&#43;08:00'>
        
    <meta name="Keywords" content="Flutter，golang,go语言,go语言笔记,飞雪无情,java,android,博客,项目管理,python,软件架构,公众号,小程序">
    <meta name="description" content="Getx">
        
    <meta name="author" content="luckly">
    <meta property="og:url" content="https://luckly.work/post/flutter_package/getx/">
    <link rel="shortcut icon" href='/favicon.ico'  type="image/x-icon">

    <link rel="stylesheet" href='/css/normalize.css'>
    <link rel="stylesheet" href='/css/style.css'>
    <script type="text/javascript" src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    
    
    
        <link href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
    
    
    
    
        <link rel="stylesheet" href='/css/douban.css'>
    
        <link rel="stylesheet" href='/css/other.css'>
    
</head>

<link rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<body>
    <header id="header" class="clearfix">
    <div class="container">
        <div class="col-group">
            <div class="site-name ">
                
                    <a id="logo" href="https://luckly.work/">
                        早起的年轻人
                    </a>
                
                <p class="description">专注于Flutter、Android、Java、Go语言(golang)、移动互联网、项目管理、软件架构</p>
            </div>
            <div>
                <nav id="nav-menu" class="clearfix">
                    <a class="current" href="https://luckly.work/">首页</a>
                    
                    <a  href="https://luckly.work/categories/" title="分类">分类</a>
                    
                    <a  href="https://luckly.work/tags/" title="标签">标签</a>
                    
                    <a  href="https://luckly.work/archives/" title="归档">归档</a>
                    
                    <a  href="https://luckly.work/about/" title="关于我">关于我</a>
                    
                    <a  href="https://github.com/ITmxs/" title="github">github</a>
                    
                </nav>
            </div>
        </div>
    </div>
</header>

    <div id="body">
        <div class="container">
            <div class="col-group">

                <div class="col-8" id="main">
                    
<div class="res-cons">
    <style type="text/css">
    .post-toc {
        position: fixed;
        width: 200px;
        margin-left: -210px;
        padding: 5px 10px;
        font-family: Athelas, STHeiti, Microsoft Yahei, serif;
        font-size: 12px;
        border: 1px solid rgba(0, 0, 0, .07);
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.98);
        background-clip: padding-box;
        -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, .125);
        box-shadow: 1px 1px 2px rgba(0, 0, 0, .125);
        word-wrap: break-word;
        white-space: nowrap;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 999;
        cursor: pointer;
        max-height: 70%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .post-toc .post-toc-title {
        width: 100%;
        margin: 0 auto;
        font-size: 20px;
        font-weight: 400;
        text-transform: uppercase;
        text-align: center;
    }

    .post-toc .post-toc-content {
        font-size: 15px;
    }

    .post-toc .post-toc-content>nav>ul {
        margin: 10px 0;
    }

    .post-toc .post-toc-content ul {
        padding-left: 20px;
        list-style: square;
        margin: 0.5em;
        line-height: 1.8em;
    }

    .post-toc .post-toc-content ul ul {
        padding-left: 15px;
        display: none;
    }

    @media print,
    screen and (max-width:1057px) {
        .post-toc {
            display: none;
        }
    }
</style>
<div class="post-toc" style="position: absolute; top: 188px;">
    <h2 class="post-toc-title">文章目录</h2>
    <div class="post-toc-content">
        <nav id="TableOfContents">
  <ul>
    <li><a href="#状态管理">状态管理</a></li>
    <li><a href="#路线管理">路线管理</a></li>
    <li><a href="#以下是我们如何使用-getx-导航到屏幕">以下是我们如何使用 GetX 导航到屏幕……</a></li>
  </ul>

  <ul>
    <li><a href="#国际化">国际化</a></li>
    <li><a href="#更改主题">更改主题</a></li>
    <li><a href="#满意点1简洁易懂"><strong>满意点1：简洁易懂</strong></a></li>
    <li><a href="#对第-2-点的满意度独立于其他功能">对第 2 点的满意度：独立于其他功能</a></li>
    <li><a href="#对第-3-点的满意度可扩展">对第 3 点的满意度：可扩展</a></li>
  </ul>

  <ul>
    <li>
      <ul>
        <li><a href="#介绍-1">介绍</a></li>
        <li><a href="#定义obx变量的三种方式">定义Obx变量的三种方式</a></li>
        <li><a href="#计数器案例">计数器案例</a></li>
        <li><a href="#自定义类案例">自定义类案例</a></li>
      </ul>
    </li>
    <li><a href="#总结">总结</a></li>
  </ul>

  <ul>
    <li><a href="#前言">前言</a></li>
    <li><a href="#三种方式对比分析">三种方式对比分析</a></li>
    <li><a href="#rxlist源码分析">RxList源码分析</a></li>
    <li><a href="#obs源码分析">.obs源码分析</a></li>
    <li><a href="#总结-1">总结</a></li>
  </ul>
</nav>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var postToc = $(".post-toc");
        if (postToc.length) {
            var leftPos = $("#main").offset().left;
            if(leftPos<220){
                postToc.css({"width":leftPos-10,"margin-left":(0-leftPos)})
            }

            var t = postToc.offset().top - 20,
                a = {
                    start: {
                        position: "absolute",
                        top: t
                    },
                    process: {
                        position: "fixed",
                        top: 20
                    },
                };
            $(window).scroll(function () {
                var e = $(window).scrollTop();
                e < t ? postToc.css(a.start) : postToc.css(a.process)
            })
        }
    })
</script>
    <article class="post">
        <header>
            <h1 class="post-title">Getx</h1>
        </header>
        <date class="post-meta meta-date">
            2021年8月19日
        </date>
        
        <div class="post-meta">
            <span>|</span>
            
            <span class="meta-category"><a href='/categories/Flutter'>Flutter</a></span>
            
        </div>
        
        
        <div class="post-meta">
            <span id="busuanzi_container_page_pv">|<span id="busuanzi_value_page_pv"></span><span>
                    阅读</span></span>
        </div>
        
        
        <div class="post-content">
            <blockquote>
<p>本文主要介绍</p>
</blockquote>
<p><a href="https://github.com/Bunny1376/pageView/tree/master/lib">https://github.com/Bunny1376/pageView/tree/master/lib</a></p>
<p><a href="https://nastaran1376mohammadi.medium.com/how-to-use-getx-flutter-package-to-create-a-pageview-66f9b6a175b9">https://nastaran1376mohammadi.medium.com/how-to-use-getx-flutter-package-to-create-a-pageview-66f9b6a175b9</a></p>
<h1 id="让我们在-flutter-中使用-getx">让我们在 Flutter 中使用 GetX</h1>
<p><a href="https://medium.com/mindful-engineering/lets-getx-in-flutter-4eaff2826ac7">https://medium.com/mindful-engineering/lets-getx-in-flutter-4eaff2826ac7</a></p>
<p><em>在本文中，我们将研究</em><strong><em>GetX*<em><strong>及其</strong></em></em>原理、特性*<em><strong>以及如何</strong>在我们的 Flutter 应用程序中</em></strong>*使用***<em>它。</em></p>
<h1 id="介绍">介绍</h1>
<p><strong>GetX</strong>是一个快速、轻量级且功能强大的微框架，使用它，我们可以轻松地管理状态、路由并以高效的方式执行依赖注入。</p>
<p>Flutter 本身就是一个快速发展的框架，它更新了很多东西，它是插件，作为开发人员，我们需要让我们的应用程序保持最新，并在 pubspec.dart 文件中为各种事情提供最新的依赖项，而不是许多这样的依赖项，我们可以使用<strong>GetX</strong>，它都在一个包中，它提供了很多正确的东西，这反过来又使我们能够防止我们在应用程序开发中经常面临的依赖噩梦。</p>
<p>如果我们使用**GetX，**那么我们可以避免使用StatefulWidgets，它肯定可以减少一些RAM消耗，不需要与initState()等其他方法混淆，而是我们有更清晰的方法来做到这一点。我们有控制器，它有自己的生命周期，可以将业务逻辑与视图分开，每当使用控制器发生任何更改时，它都会自动更新视图。</p>
<p>
        <a data-fancybox="gallery" href="https://miro.medium.com/max/875/0*G-tKPOnuxEX70J2w.jpeg">
            <img class="mx-auto" alt="img" src="https://miro.medium.com/max/875/0*G-tKPOnuxEX70J2w.jpeg" />
        </a>
    </p>
<p>GetX 有 3 个基本**原则。**让我们看看他们，</p>
<ul>
<li><strong>性能：GetX</strong>主要关注更好的性能和最少的资源使用，所以在我看来，它是最好的状态管理技术。</li>
<li><strong>生产力</strong>：除了一流的性能外，<strong>GetX</strong>还具有易于记忆的语法。它节省了开发人员的大量时间，并通过减少资源的使用来提高应用程序的速度。</li>
<li><strong>组织：GetX</strong>允许我们取消视图上的业务逻辑，并将依赖注入和导航与 UI 分开。您不需要上下文来在屏幕之间导航。你不需要通过多提供者将你的控制器/模型/块类注入你的小部件树，因为这个 GetX 使用它自己的依赖注入功能。</li>
</ul>
<h1 id="安装将此包用作库">安装：将此包用作库</h1>
<p>将 Get 添加到包的 pubspec.yaml 文件中：</p>
<p>
        <a data-fancybox="gallery" href="https://miro.medium.com/max/851/0*ZbdHbg6HOijWKy2E.png">
            <img class="mx-auto" alt="img" src="https://miro.medium.com/max/851/0*ZbdHbg6HOijWKy2E.png" />
        </a>
    </p>
<p>将其导入到将要使用的文件中：</p>
<p>
        <a data-fancybox="gallery" href="https://miro.medium.com/max/861/0*QAQ7WeYAquK4tw28.png">
            <img class="mx-auto" alt="img" src="https://miro.medium.com/max/861/0*QAQ7WeYAquK4tw28.png" />
        </a>
    </p>
<h1 id="getx-的特点">GetX 的特点</h1>
<h2 id="状态管理">状态管理</h2>
<p><em>Flutter 中</em>有很多可用的状态管理库，如 B <em>LoC、Provider、MobX</em>等。<strong>GetX</strong>本身为我们提供了<strong>两种</strong>状态管理选项。</p>
<ul>
<li><em>简单的状态管理器(称为</em><em><strong>GetBuilder*</strong></em>)。</li>
<li><em>反应状态管理器(称为</em><em><strong>GetX/Obx*</strong></em>)。</li>
</ul>
<p><strong>简单的状态管理：GetX</strong>具有 GetBuilder，用于使 UI 屏幕或视图与控制器上的变量和方法进行交互。从这里，我们可以调用函数并监听状态的变化。所以，让我们先创建一个控制器。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:get/get.dart&#39;</span>;

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">CounterController</span> <span style="color:#66d9ef">extends</span> GetxController {
  <span style="color:#66d9ef">var</span> counter <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>;
  increment() { 
    counter<span style="color:#f92672">++</span>;
    update();
  }
}
</code></pre></div><p>我们使用<strong>update()<strong>方法，以便 UI 中的小部件可以监听我们在控制器方法中所做的更改。现在要聆听更改，我们必须用</strong>GetBuilder</strong>包装我们的小部件。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
GetBuilder<span style="color:#f92672">&lt;</span>CounterController<span style="color:#f92672">&gt;</span>(
      init: CounterController(),
      builder: (value) {
        <span style="color:#66d9ef">return</span> Text(
          <span style="color:#e6db74">&#39;</span><span style="color:#e6db74">${</span>value.counter<span style="color:#e6db74">}</span><span style="color:#e6db74">&#39;</span>,
          style: Theme.of(context).textTheme.headline4,
        );
      },
    );
</code></pre></div><p>我们只需要在第一次和第二次为同一个控制器使用 ReBuilder 时初始化我们的控制器，不要再次初始化它。</p>
<blockquote>
<p>无需将 StatefulWidget 与 GetX 一起使用，因为<strong>GetBuilder</strong>替换了<strong>StatefulWidget</strong>，我们可以将所有小部件保持为无状态，并根据我们的要求使用 GetBuilder 包装特定小部件。</p>
</blockquote>
<p><strong>反应性状态管理：</strong> GetBuilder 不是反应性的，这意味着我们将无法为此使用流，我们必须使用<strong>GetX</strong>类。语法<strong>的getX</strong>非常相似<strong>GetBuilder</strong>但是这种方法是基于扑的<strong>流</strong>。<strong>GetX</strong>具有所有必需的<strong>响应****式</strong>编程功能，我们不需要为每个变量使用 StreamControllers、StreamBuilders 和每个状态的类，甚至我们不需要使用任何由代码生成器自动生成的类。来看看怎么用吧</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:get/get.dart&#39;</span>;

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">CounterController</span> <span style="color:#66d9ef">extends</span> GetxController {
  <span style="color:#66d9ef">var</span> counter <span style="color:#f92672">=</span> <span style="color:#ae81ff">0.</span>obs;
  increment() <span style="color:#f92672">=&gt;</span> counter<span style="color:#f92672">++</span>;
}
</code></pre></div><p>我们必须将**.obs**添加到任何变量以使其可观察。基本上我们使用 counter 作为 int 类型的流。</p>
<p>我们可以使用<strong>GetX 的</strong>力量从我们的角度聆听计数器的变化。像这样，</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">GetX<span style="color:#f92672">&lt;</span>CounterController<span style="color:#f92672">&gt;</span>(
      init: CounterController(),
      builder: (value) {
        <span style="color:#66d9ef">return</span> Text(
          <span style="color:#e6db74">&#39;</span><span style="color:#e6db74">${</span>value.counter<span style="color:#e6db74">}</span><span style="color:#e6db74">&#39;</span>,
          style: Theme.of(context).textTheme.headline4,
        );
      },
    );
</code></pre></div><p>我们可以使用<strong>Obx</strong>小部件而不是<strong>GetX</strong>，它为我们提供匿名函数，为我们创建一个小部件，并从我们的视图中使用我们的变量和方法，我们需要首先像这样初始化控制器，</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">final</span> CounterController controller <span style="color:#f92672">=</span> Get.put(CounterController());

Obx(
   () <span style="color:#f92672">=&gt;</span> Text(
     <span style="color:#e6db74">&#39;</span><span style="color:#e6db74">${</span>controller.counter<span style="color:#e6db74">}</span><span style="color:#e6db74">&#39;</span>,
      style: Theme.of(context).textTheme.headline4,
    ),
 );
</code></pre></div><h2 id="路线管理">路线管理</h2>
<p>如果我们想使用像 Snackbar、Bottomsheets、对话框等小部件，那么我们可以使用<strong>GetX</strong>，因为它可以在不使用上下文的情况下构建这些小部件，并且它提供了用于在 Flutter 应用程序中导航的 API，只需简单且所需的代码更少。</p>
<h2 id="以下是我们如何使用-getx-导航到屏幕">以下是我们如何使用 GetX 导航到屏幕……</h2>
<p>要导航到新屏幕，我们可以像这样使用它，</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
Get.to(() <span style="color:#f92672">=&gt;</span> NewScreen())
</code></pre></div><p>
        <a data-fancybox="gallery" href="https://miro.medium.com/max/450/0*ueRlM8k6fQ3SmNVE.png">
            <img class="mx-auto" alt="img" src="https://miro.medium.com/max/450/0*ueRlM8k6fQ3SmNVE.png" />
        </a>
    </p>
<p>要使用名称导航到新屏幕，我们可以像这样使用它，</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">Get.toNamed(<span style="color:#e6db74">&#39;profile&#39;</span>)
</code></pre></div><p>关闭快餐栏、对话框、底页或任何你通常会用 Navigator.pop(context) 关闭的东西；我们可以这样使用它</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
Get.back()
</code></pre></div><p>要导航到下一个屏幕并且不想返回上一个屏幕(用于 SplashScreens、登录屏幕等)，我们可以像这样使用它，</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
Get.off(NewScreen())
</code></pre></div><p>要导航到下一个屏幕并取消所有以前的路线(在购物车应用程序、民意调查和测试中很有用)，我们可以这样使用它，</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">Get.offAll(NewScreen())
</code></pre></div><h1 id="依赖管理">依赖管理</h1>
<p><strong>GetX</strong>为我们的<strong>Flutter</strong>应用程序提供了一个简单而强大的依赖管理器，我们可以使用它在一行代码中使用类名访问 Bloc 或 Controller。</p>
<p>
        <a data-fancybox="gallery" href="https://miro.medium.com/max/256/0*W2i2NLJAmY0Y8SjG.png">
            <img class="mx-auto" alt="img" src="https://miro.medium.com/max/256/0*W2i2NLJAmY0Y8SjG.png" />
        </a>
    </p>
<p><strong>Get.put() 是</strong>插入依赖项的最常见方式，它立即加载并且可以直接使用。我们可以这样使用它</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">Controller controller <span style="color:#f92672">=</span> Get.put(Controller()); <span style="color:#75715e">//
</span></code></pre></div><p>**Get.lazyPut()**延迟加载依赖项，以便仅在使用时实例化它。我们可以这样使用它</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
Get.lazyPut<span style="color:#f92672">&lt;</span>Controller<span style="color:#f92672">&gt;</span>(() <span style="color:#f92672">=&gt;</span> Controller());
</code></pre></div><p><strong>Get.lazyPut()<strong>只加载一次依赖项，这意味着如果我们再次删除并创建路由，它不会再次加载依赖项，因此为了克服这种默认行为，我们必须使用</strong>fenix</strong>属性。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
Get.lazyPut<span style="color:#f92672">&lt;</span>Controller<span style="color:#f92672">&gt;</span>(() <span style="color:#f92672">=&gt;</span> Controller(), fenix: <span style="color:#66d9ef">true</span>);
</code></pre></div><p>当路线回到导航堆栈中时，依赖项再次重新初始化。</p>
<p>**Get.putAsync()**用于注册异步实例。我们可以这样使用它</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">Get.putAsync<span style="color:#f92672">&lt;</span>Controller<span style="color:#f92672">&gt;</span>( () <span style="color:#66d9ef">async</span> <span style="color:#f92672">=&gt;</span> <span style="color:#66d9ef">await</span> Controller() );
</code></pre></div><p>当我们需要在整个应用程序中保持该实例处于活动状态时，我们可以将 true 设置为可选的<strong>永久</strong>属性。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
Get.putAsync<span style="color:#f92672">&lt;</span>Controller<span style="color:#f92672">&gt;</span>( () <span style="color:#66d9ef">async</span> <span style="color:#f92672">=&gt;</span> <span style="color:#66d9ef">await</span> Controller(), permanent: <span style="color:#66d9ef">true</span> );
</code></pre></div><p>**Get.create()**当我们每次都必须创建依赖项的新实例时使用。我们可以这样使用它</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">Get.create(() <span style="color:#f92672">=&gt;</span> Controller());
</code></pre></div><h2 id="国际化">国际化</h2>
<p>国际化是开发人员利用系统提供的 API 执行的一项活动，使应用程序的阿拉伯语或中文与英语一样好。</p>
<p>
        <a data-fancybox="gallery" href="https://miro.medium.com/max/275/0*3XL98QcN-YHpmukj.gif">
            <img class="mx-auto" alt="img" src="https://miro.medium.com/max/275/0*3XL98QcN-YHpmukj.gif" />
        </a>
    </p>
<p><strong>GetX</strong>提供了作为简单键值字典映射的翻译工具。要创建我们自己的自定义类，我们必须使用 Translations 类扩展我们的类。我们可以这样使用它</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:get/get.dart&#39;</span>;

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Messages</span> <span style="color:#66d9ef">extends</span> Translations {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  Map<span style="color:#f92672">&lt;</span><span style="color:#66d9ef">String</span>, Map<span style="color:#f92672">&lt;</span><span style="color:#66d9ef">String</span>, <span style="color:#66d9ef">String</span><span style="color:#f92672">&gt;&gt;</span> <span style="color:#66d9ef">get</span> keys <span style="color:#f92672">=&gt;</span>
      {
        <span style="color:#e6db74">&#39;en_US&#39;</span><span style="color:#f92672">:</span> {
          <span style="color:#e6db74">&#39;hello&#39;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Hello World&#39;</span>,
        },
        <span style="color:#e6db74">&#39;de_DE&#39;</span><span style="color:#f92672">:</span> {
          <span style="color:#e6db74">&#39;hello&#39;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#39;Hallo Welt&#39;</span>,
        }
      };
}
</code></pre></div><p>要使用它，我们只需将**.tr**附加到指定的键，它就会被翻译，使用**Get.locale**和**Get.fallbackLocale**的当前值**传入****GetMaterialApp**的参数**。**</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
Text(<span style="color:#e6db74">&#39;hello&#39;</span>.tr);
</code></pre></div><h2 id="更改主题">更改主题</h2>
<p>当我们使用**GetX 时，**我们不需要使用任何比“GetMaterialApp”小部件更高级别的小部件，而且我们也不需要使用“ThemeProvider”小部件来更改主题。</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
Get.changeTheme(ThemeData.dark());
</code></pre></div><p>将主题从亮到暗或从暗到亮切换，我们可以使用这样的东西，</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">
Get.changeTheme(Get.isDarkMode <span style="color:#f92672">?</span> ThemeData.light() <span style="color:#f92672">:</span> ThemeData.dark());
</code></pre></div><p>当<strong>Get.isDarkMode</strong>被激活时，它将切换到浅色主题，反之亦然。</p>
<h2 id="满意点1简洁易懂"><strong>满意点1：简洁易懂</strong></h2>
<p>如您所见，此文件夹结构非常干净且易于理解，因为它没有太多复杂性。所以即使是初学者也可以轻松查看代码结构。此外，这种简单的项目结构有助于我们快速跟踪错误并解决它们。</p>
<h2 id="对第-2-点的满意度独立于其他功能">对第 2 点的满意度：独立于其他功能</h2>
<p>如您所见，每个功能都有自己的文件夹，因此它们彼此完全独立。</p>
<h2 id="对第-3-点的满意度可扩展">对第 3 点的满意度：可扩展</h2>
<p>假设现在您希望在我们的聊天应用程序中添加任何其他功能，例如，您现在希望拥有一个聊天列表或您朋友的所有联系人列表，因此您只需创建一个名为<code>chat_list</code>or的新文件夹<code>contact_list</code>并创建相同的文件夹结构。因此，您可以说这个项目结构是可扩展的，因为添加新功能不需要您更改现有的功能文件。</p>
<p><a href="https://segmentfault.com/a/1190000039139198">https://segmentfault.com/a/1190000039139198</a></p>
<p><a href="https://www.cxyzjd.com/article/zl18603543572/115586290">https://www.cxyzjd.com/article/zl18603543572/115586290</a></p>
<p><a href="https://blog.csdn.net/qq_36407748/article/details/115204260">https://blog.csdn.net/qq_36407748/article/details/115204260</a></p>
<p><a href="https://ithelp.ithome.com.tw/articles/10215918">https://ithelp.ithome.com.tw/articles/10215918</a></p>
<h1 id="obx响应式状态管理">Obx响应式状态管理</h1>
<h3 id="介绍-1">介绍</h3>
<blockquote>
<p>响应式编程可能会让很多人感到陌生，因为它很复杂，但是GetX将响应式编程变得非常简单。</p>
<ul>
<li>你不需要创建StreamControllers.</li>
<li>你不需要为每个变量创建一个StreamBuilder。</li>
<li>你不需要为每个状态创建一个类。</li>
<li>你不需要为一个初始值创建一个get。</li>
</ul>
<p>使用 Get 的响应式编程就像使用 setState 一样简单。</p>
</blockquote>
<h3 id="定义obx变量的三种方式">定义Obx变量的三种方式</h3>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#75715e">// 第一种 使用 Rx{Type}
</span><span style="color:#75715e">// final name = RxString(&#39;&#39;);
</span><span style="color:#75715e">// final isLogged = RxBool(false);
</span><span style="color:#75715e">// final count = RxInt(0);
</span><span style="color:#75715e">// final balance = RxDouble(0.0);
</span><span style="color:#75715e">// final items = RxList&lt;String&gt;([]);
</span><span style="color:#75715e">// final myMap = RxMap&lt;String, int&gt;({});
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 第二种是使用 Rx，规定泛型 Rx&lt;Type&gt;。
</span><span style="color:#75715e">// final name = Rx&lt;String&gt;(&#39;&#39;);
</span><span style="color:#75715e">// final isLogged = Rx&lt;Bool&gt;(false);
</span><span style="color:#75715e">// final count = Rx&lt;Int&gt;(0);
</span><span style="color:#75715e">// final balance = Rx&lt;Double&gt;(0.0);
</span><span style="color:#75715e">// final number = Rx&lt;Num&gt;(0)
</span><span style="color:#75715e">// final items = Rx&lt;List&lt;String&gt;&gt;([]);
</span><span style="color:#75715e">// final myMap = Rx&lt;Map&lt;String, int&gt;&gt;({});
</span><span style="color:#75715e">// 自定义类 - 可以是任何类
</span><span style="color:#75715e">// final user = Rx&lt;User&gt;();
</span><span style="color:#75715e"></span>
<span style="color:#75715e">// 第三种更实用、更简单、更可取的方法，只需添加 .obs 作为value的属性。
</span><span style="color:#75715e">// final name = &#39;&#39;.obs;
</span><span style="color:#75715e">// final isLogged = false.obs;
</span><span style="color:#75715e">// final count = 0.obs;
</span><span style="color:#75715e">// final balance = 0.0.obs;
</span><span style="color:#75715e">// final number = 0.obs;
</span><span style="color:#75715e">// final items = &lt;String&gt;[].obs;
</span><span style="color:#75715e">// final myMap = &lt;String, int&gt;{}.obs;
</span><span style="color:#75715e">// 自定义类 - 可以是任何类
</span><span style="color:#75715e">// final user = User().obs;
</span></code></pre></div><h3 id="计数器案例">计数器案例</h3>
<h4 id="第一步应用程序入口设置">第一步：应用程序入口设置</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter/material.dart&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter_getx_example/ObxCountExample/ObxCountExample.dart&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:get/get.dart&#39;</span>;

<span style="color:#66d9ef">void</span> main() {
  runApp(MyApp());
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyApp</span> <span style="color:#66d9ef">extends</span> StatelessWidget {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> GetMaterialApp(
      title: <span style="color:#e6db74">&#34;GetX&#34;</span>,
      home: ObxCountExample(),
    );
  }
}
</code></pre></div><h4 id="第二步声明rx变量以及改变计数器的方法">第二步：声明Rx变量以及改变计数器的方法</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">RxInt count <span style="color:#f92672">=</span> RxInt(<span style="color:#ae81ff">0</span>);
<span style="color:#75715e">// var count = Rx&lt;double&gt;(0);
</span><span style="color:#75715e">// var count = 0.obs;
</span><span style="color:#75715e"></span>
<span style="color:#66d9ef">void</span> increment() {
  count<span style="color:#f92672">++</span>;
}
</code></pre></div><h4 id="第三步使用obx监听值的改变">第三步：使用Obx监听值的改变</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">Obx(() <span style="color:#f92672">=&gt;</span> Text(
  <span style="color:#e6db74">&#34;count的值为: </span><span style="color:#e6db74">$</span>count<span style="color:#e6db74">&#34;</span>,
  style: TextStyle(color: Colors.red, fontSize: <span style="color:#ae81ff">30</span>),
)),
</code></pre></div><h4 id="完整代码">完整代码</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;dart:ffi&#39;</span>;

<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter/material.dart&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:get/get.dart&#39;</span>;

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">ObxCountExample</span> <span style="color:#66d9ef">extends</span> StatelessWidget {
  RxInt count <span style="color:#f92672">=</span> RxInt(<span style="color:#ae81ff">0</span>);
  <span style="color:#75715e">// var count = Rx&lt;double&gt;(0);
</span><span style="color:#75715e"></span>  <span style="color:#75715e">// var count = 0.obs;
</span><span style="color:#75715e"></span>
  <span style="color:#66d9ef">void</span> increment() {
    count<span style="color:#f92672">++</span>;
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> Scaffold(
      appBar: AppBar(
        title: Text(<span style="color:#e6db74">&#34;GetX Obx---计数器&#34;</span>),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Obx(() <span style="color:#f92672">=&gt;</span> Text(
              <span style="color:#e6db74">&#34;count的值为: </span><span style="color:#e6db74">$</span>count<span style="color:#e6db74">&#34;</span>,
              style: TextStyle(color: Colors.red, fontSize: <span style="color:#ae81ff">30</span>),
            )),
            SizedBox(height: <span style="color:#ae81ff">20</span>,),
            ElevatedButton(
              onPressed: () {
                increment();
              },
              child: Text(<span style="color:#e6db74">&#34;点我加1&#34;</span>))
          ],
        ),
      ),
    );
  }
}
</code></pre></div><h4 id="效果展示">效果展示</h4>
<p><a href="https://gz-ljm-blog.oss-cn-guangzhou.aliyuncs.com/blog-video/obx---count.gif">
        <a data-fancybox="gallery" href="https://gz-ljm-blog.oss-cn-guangzhou.aliyuncs.com/blog-video/obx---count.gif">
            <img class="mx-auto" alt="img" src="https://gz-ljm-blog.oss-cn-guangzhou.aliyuncs.com/blog-video/obx---count.gif" />
        </a>
    </a></p>
<h3 id="自定义类案例">自定义类案例</h3>
<h4 id="第一步应用程序入口设置-1">第一步：应用程序入口设置</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter/material.dart&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter_getx_example/ObxCustomClassExample/ObxCustomClassExample.dart&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:get/get.dart&#39;</span>;

<span style="color:#66d9ef">void</span> main() {
  runApp(MyApp());
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyApp</span> <span style="color:#66d9ef">extends</span> StatelessWidget {
  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> GetMaterialApp(
      title: <span style="color:#e6db74">&#34;GetX&#34;</span>,
      home: ObxCustomClassExample(),
    );
  }
}
</code></pre></div><h4 id="第二步创建teacher类">第二步：创建Teacher类</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:get/get.dart&#39;</span>;

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Teacher</span> {

  <span style="color:#75715e">// rx 变量
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">var</span> name <span style="color:#f92672">=</span> <span style="color:#e6db74">&#34;Jimi&#34;</span>.obs;
  <span style="color:#66d9ef">var</span> age <span style="color:#f92672">=</span> <span style="color:#ae81ff">18.</span>obs;

  <span style="color:#75715e">// 构造函数创建
</span><span style="color:#75715e"></span>  <span style="color:#75715e">// var name;
</span><span style="color:#75715e"></span>  <span style="color:#75715e">// var age;
</span><span style="color:#75715e"></span>  <span style="color:#75715e">// Teacher({this.name, this.age});
</span><span style="color:#75715e"></span>}
</code></pre></div><h4 id="第三步监听teacher状态改变">第三步：监听Teacher状态改变</h4>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter/material.dart&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter_getx_example/ObxCustomClassExample/Teacher.dart&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:get/get.dart&#39;</span>;

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">ObxCustomClassExample</span> <span style="color:#66d9ef">extends</span> StatelessWidget {

  <span style="color:#66d9ef">var</span> teacher <span style="color:#f92672">=</span> Teacher();

  <span style="color:#75715e">// final teacher = Teacher(name: &#34;Jimi&#34;, age: 18).obs;
</span><span style="color:#75715e"></span>
  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> Scaffold(
      appBar: AppBar(
        title: Text(<span style="color:#e6db74">&#34;GetX Obx---自定义类&#34;</span>),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Obx(() <span style="color:#f92672">=&gt;</span> Text(
              <span style="color:#e6db74">&#34;我的名字是 </span><span style="color:#e6db74">${</span>teacher.name.value<span style="color:#e6db74">}</span><span style="color:#e6db74">&#34;</span>,
              style: TextStyle(color: Colors.red, fontSize: <span style="color:#ae81ff">30</span>),
            )),
            SizedBox(height: <span style="color:#ae81ff">20</span>,),
            ElevatedButton(
              onPressed: () {
                teacher.name.value <span style="color:#f92672">=</span> teacher.name.value.toUpperCase();

                <span style="color:#75715e">// teacher.update((val) {
</span><span style="color:#75715e"></span>                <span style="color:#75715e">//   teacher.value.name = teacher.value.name.toString().toUpperCase();
</span><span style="color:#75715e"></span>                <span style="color:#75715e">// });
</span><span style="color:#75715e"></span>              },
              child: Text(<span style="color:#e6db74">&#34;转换为大写&#34;</span>))
          ],
        ),
      ),
    );
  }
}
</code></pre></div><h4 id="效果展示-1">效果展示</h4>
<p><a href="https://gz-ljm-blog.oss-cn-guangzhou.aliyuncs.com/blog-video/getx_obx_customclass.gif">
        <a data-fancybox="gallery" href="https://gz-ljm-blog.oss-cn-guangzhou.aliyuncs.com/blog-video/getx_obx_customclass.gif">
            <img class="mx-auto" alt="img" src="https://gz-ljm-blog.oss-cn-guangzhou.aliyuncs.com/blog-video/getx_obx_customclass.gif" />
        </a>
    </a></p>
<h2 id="总结">总结</h2>
<p>通过这个章节知道了<code>GetX</code>是一个高性能的状态管理、智能的依赖注入和便捷的路由管理，我们介绍了什么<code>GetX</code>以及如果使用，包括<code>Snackbar</code>、<code>Dialog</code>、<code>BottomSheet</code>、<code>Navigation</code>、<code>Obx</code> 等进行了一个简单的介绍，使用<code>GetX</code>后能极简的缩减我们的代码。</p>
<h1 id="flutter-getx---rxlistrxobs对比分析">Flutter GetX&mdash;RxList、Rx([])、.obs对比分析</h1>
<h2 id="前言">前言</h2>
<p>首先我们知道<code>GetX</code>组件里面<code>obs</code>状态管理有三种创建属性的方式，我们这里以<code>List</code>为例</p>
<ul>
<li>Rx([])</li>
<li>RxList</li>
<li>.obs</li>
</ul>
<h2 id="三种方式对比分析">三种方式对比分析</h2>
<p>我们声明了一个类ListController<code>继承自</code>GetxController<code>，用于属性创建以及状态通知的方法，首先我们用三种方式来创建属性并且通过</code>convertToUpperCase<code>方法进行对值的改变，然后我们通过调用</code>update()`方法来进行数据更新，最后我们使用该属性状态的值，接下来我们看一下三种使用方式的对比。</p>
<ul>
<li>第一种Rx([])</li>
<li>第二种RxList</li>
<li>第三种 .obs</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;dart:convert&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:get/get.dart&#39;</span>;

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">ListController</span> <span style="color:#66d9ef">extends</span> GetxController {
  <span style="color:#75715e">// 第一种
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">final</span> listOne <span style="color:#f92672">=</span> Rx<span style="color:#f92672">&lt;</span>List<span style="color:#f92672">&lt;</span>Map<span style="color:#f92672">&gt;&gt;</span>([
    {
      <span style="color:#e6db74">&#34;name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;Jimi&#34;</span>,
      <span style="color:#e6db74">&#34;age&#34;</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">18</span>
    }
  ]);

  <span style="color:#75715e">// 第二种
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">final</span> listTwo <span style="color:#f92672">=</span> RxList([
    {
      <span style="color:#e6db74">&#34;name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;Jimi&#34;</span>,
      <span style="color:#e6db74">&#34;age&#34;</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">18</span>
    }
  ]);

  <span style="color:#75715e">// 第三种
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">final</span> listThree <span style="color:#f92672">=</span> [{
    <span style="color:#e6db74">&#34;name&#34;</span><span style="color:#f92672">:</span> <span style="color:#e6db74">&#34;Jimi&#34;</span>,
    <span style="color:#e6db74">&#34;age&#34;</span><span style="color:#f92672">:</span> <span style="color:#ae81ff">18</span>
  }].obs;

  <span style="color:#66d9ef">void</span> convertToUpperCase() {
    listOne.value[<span style="color:#ae81ff">0</span>][<span style="color:#e6db74">&#34;name&#34;</span>] <span style="color:#f92672">=</span> listOne.value.first[<span style="color:#e6db74">&#34;name&#34;</span>].toUpperCase();
    listTwo.toList().first[<span style="color:#e6db74">&#34;name&#34;</span>] <span style="color:#f92672">=</span> listTwo.toList().first[<span style="color:#e6db74">&#34;name&#34;</span>].toString().toUpperCase();
    listThree.toList().first[<span style="color:#e6db74">&#34;name&#34;</span>] <span style="color:#f92672">=</span> listTwo.toList().first[<span style="color:#e6db74">&#34;name&#34;</span>].toString().toUpperCase();
    update();
  }
}
</code></pre></div><p>我们在页面中获取状态更新的值</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter/material.dart&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:flutter_getx_dvanced_example/ListController.dart&#39;</span>;
<span style="color:#66d9ef">import</span> <span style="color:#e6db74">&#39;package:get/get.dart&#39;</span>;


<span style="color:#66d9ef">void</span> main() {
  runApp(MyApp());
}

<span style="color:#66d9ef">class</span> <span style="color:#a6e22e">MyApp</span> <span style="color:#66d9ef">extends</span> StatelessWidget {

  ListController listController <span style="color:#f92672">=</span> Get.put(ListController());

  <span style="color:#960050;background-color:#1e0010">@</span>override
  Widget build(BuildContext context) {
    <span style="color:#66d9ef">return</span> GetMaterialApp(
      title: <span style="color:#e6db74">&#34;GetX&#34;</span>,
      home: Scaffold(
        appBar: AppBar(
          title: Text(<span style="color:#e6db74">&#34;GetX&#34;</span>),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              GetBuilder<span style="color:#f92672">&lt;</span>ListController<span style="color:#f92672">&gt;</span>(
                init: listController,
                builder: (controller) {
                  <span style="color:#66d9ef">return</span> Text(
                    <span style="color:#e6db74">&#34;我的名字是 </span><span style="color:#e6db74">${</span>controller.listOne.value.first[<span style="color:#e6db74">&#39;name&#39;</span>]<span style="color:#e6db74">}</span><span style="color:#e6db74">&#34;</span>,
                    style: TextStyle(color: Colors.orange, fontSize: <span style="color:#ae81ff">30</span>),
                  );
                },
              ),
              SizedBox(height: <span style="color:#ae81ff">20</span>,),
              GetBuilder<span style="color:#f92672">&lt;</span>ListController<span style="color:#f92672">&gt;</span>(
                init: listController,
                builder: (controller) {
                  <span style="color:#66d9ef">return</span> Text(
                    <span style="color:#e6db74">&#34;我的名字是 </span><span style="color:#e6db74">${</span>controller.listTwo.first[<span style="color:#e6db74">&#39;name&#39;</span>]<span style="color:#e6db74">}</span><span style="color:#e6db74">&#34;</span>,
                    style: TextStyle(color: Colors.green, fontSize: <span style="color:#ae81ff">30</span>),
                  );
                },
              ),
              SizedBox(height: <span style="color:#ae81ff">20</span>,),
              GetBuilder<span style="color:#f92672">&lt;</span>ListController<span style="color:#f92672">&gt;</span>(
                init: listController,
                builder: (controller) {
                  <span style="color:#66d9ef">return</span> Text(
                    <span style="color:#e6db74">&#34;我的名字是 </span><span style="color:#e6db74">${</span>controller.listThree.first[<span style="color:#e6db74">&#39;name&#39;</span>]<span style="color:#e6db74">}</span><span style="color:#e6db74">&#34;</span>,
                    style: TextStyle(color: Colors.green, fontSize: <span style="color:#ae81ff">30</span>),
                  );
                },
              ),
              SizedBox(height: <span style="color:#ae81ff">20</span>,),
              ElevatedButton(
                onPressed: () {
                  listController.convertToUpperCase();
                },
                child: Text(<span style="color:#e6db74">&#34;转换为大写&#34;</span>))
            ],
          ),
        ),
      ),
    );
  }
}
</code></pre></div><p>效果展示</p>
<p>
        <a data-fancybox="gallery" href="https://gz-ljm-blog.oss-cn-guangzhou.aliyuncs.com/blog-video/getx_dvanced%E4%B8%89%E7%A7%8D%E5%B1%9E%E6%80%A7%E5%88%9B%E5%BB%BA%E6%96%B9%E5%BC%8F%E5%AF%B9%E6%AF%94%E5%88%86%E6%9E%90.gif">
            <img class="mx-auto" alt="img" src="https://gz-ljm-blog.oss-cn-guangzhou.aliyuncs.com/blog-video/getx_dvanced%E4%B8%89%E7%A7%8D%E5%B1%9E%E6%80%A7%E5%88%9B%E5%BB%BA%E6%96%B9%E5%BC%8F%E5%AF%B9%E6%AF%94%E5%88%86%E6%9E%90.gif" />
        </a>
    </p>
<p><code>Rx&lt;T&gt;</code> 继承自<code>_RxImpl&lt;T&gt;</code>，<code>_RxImpl&lt;T&gt;</code>又继承<code>RxNotifier&lt;T&gt;</code>并混合 <code>RxObjectMixin&lt;T&gt;</code> 类</p>
<p><code>RxImpl&lt;T&gt;</code>它主要的作用是管理泛型的所有逻辑的。</p>
<p><code>RxObjectMixin&lt;T&gt;</code> 它主要的作用是管理注册到<code>GetX</code>和<code>Obx</code>的全局对象，比如<code>Widget</code>的<code>Rx</code>值</p>
<p><code>Rx&lt;T&gt;</code>它主要的作用是将自定义模型类用Rx`来进行包装，</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">Rx</span><span style="color:#f92672">&lt;</span>T<span style="color:#f92672">&gt;</span> <span style="color:#66d9ef">extends</span> _RxImpl<span style="color:#f92672">&lt;</span>T<span style="color:#f92672">&gt;</span> {
  Rx(T initial) <span style="color:#f92672">:</span> <span style="color:#66d9ef">super</span>(initial);

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">dynamic</span> toJson() {
    <span style="color:#66d9ef">try</span> {
      <span style="color:#66d9ef">return</span> (value <span style="color:#f92672">as</span> <span style="color:#66d9ef">dynamic</span>)<span style="color:#f92672">?</span>.toJson();
    } on Exception <span style="color:#66d9ef">catch</span> (_) {
      <span style="color:#66d9ef">throw</span> <span style="color:#e6db74">&#39;</span><span style="color:#e6db74">$</span>T<span style="color:#e6db74"> has not method [toJson]&#39;</span>;
    }
  }
}

<span style="color:#66d9ef">abstract</span> <span style="color:#66d9ef">class</span> <span style="color:#a6e22e">_RxImpl</span><span style="color:#f92672">&lt;</span>T<span style="color:#f92672">&gt;</span> <span style="color:#66d9ef">extends</span> RxNotifier<span style="color:#f92672">&lt;</span>T<span style="color:#f92672">&gt;</span> <span style="color:#66d9ef">with</span> RxObjectMixin<span style="color:#f92672">&lt;</span>T<span style="color:#f92672">&gt;</span> {
  _RxImpl(T initial) {
    _value <span style="color:#f92672">=</span> initial;
  }

  <span style="color:#66d9ef">void</span> addError(<span style="color:#66d9ef">Object</span> error, [StackTrace<span style="color:#f92672">?</span> stackTrace]) {
    subject.addError(error, stackTrace);
  }

  Stream<span style="color:#f92672">&lt;</span>R<span style="color:#f92672">&gt;</span> map<span style="color:#f92672">&lt;</span>R<span style="color:#f92672">&gt;</span>(R mapper(T<span style="color:#f92672">?</span> data)) <span style="color:#f92672">=&gt;</span> stream.map(mapper);

  <span style="color:#66d9ef">void</span> update(<span style="color:#66d9ef">void</span> fn(T<span style="color:#f92672">?</span> val)) {
    fn(_value);
    subject.add(_value);
  }

  <span style="color:#66d9ef">void</span> trigger(T v) {
    <span style="color:#66d9ef">var</span> firstRebuild <span style="color:#f92672">=</span> <span style="color:#66d9ef">this</span>.firstRebuild;
    value <span style="color:#f92672">=</span> v;
    <span style="color:#66d9ef">if</span> (<span style="color:#f92672">!</span>firstRebuild) {
      subject.add(v);
    }
  }
}
</code></pre></div><h2 id="rxlist源码分析">RxList源码分析</h2>
<pre><code>RxList&lt;E&gt;`继承自`ListMixin&lt;E&gt;`实现了`RxInterface&lt;List&lt;E&gt;&gt;`并混合了`NotifyManager&lt;List&lt;E&gt;&gt;, RxObjectMixin&lt;List&lt;E&gt;&gt;
</code></pre><p><code>RxList&lt;E&gt;</code>它的主要作用是创建一个类似于<code>List&lt;T&gt;</code> 的一个列表</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart"><span style="color:#66d9ef">class</span> <span style="color:#a6e22e">RxList</span><span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> <span style="color:#66d9ef">extends</span> ListMixin<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span>
  <span style="color:#66d9ef">with</span> NotifyManager<span style="color:#f92672">&lt;</span>List<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;&gt;</span>, RxObjectMixin<span style="color:#f92672">&lt;</span>List<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;&gt;</span>
  <span style="color:#66d9ef">implements</span> RxInterface<span style="color:#f92672">&lt;</span>List<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;&gt;</span> {
  RxList([List<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> initial <span style="color:#f92672">=</span> <span style="color:#66d9ef">const</span> []]) {
    _value <span style="color:#f92672">=</span> List.from(initial);
  }

  <span style="color:#66d9ef">factory</span> RxList.filled(<span style="color:#66d9ef">int</span> length, E fill, {<span style="color:#66d9ef">bool</span> growable <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>}) {
    <span style="color:#66d9ef">return</span> RxList(List.filled(length, fill, growable: growable));
  }

  <span style="color:#66d9ef">factory</span> RxList.empty({<span style="color:#66d9ef">bool</span> growable <span style="color:#f92672">=</span> <span style="color:#66d9ef">false</span>}) {
    <span style="color:#66d9ef">return</span> RxList(List.empty(growable: growable));
  }

  <span style="color:#75715e">/// Creates a list containing all [elements].
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">factory</span> RxList.from(Iterable elements, {<span style="color:#66d9ef">bool</span> growable <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>}) {
    <span style="color:#66d9ef">return</span> RxList(List.from(elements, growable: growable));
  }

  <span style="color:#75715e">/// Creates a list from [elements].
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">factory</span> RxList.of(Iterable<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> elements, {<span style="color:#66d9ef">bool</span> growable <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>}) {
    <span style="color:#66d9ef">return</span> RxList(List.of(elements, growable: growable));
  }

  <span style="color:#75715e">/// Generates a list of values.
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">factory</span> RxList.generate(<span style="color:#66d9ef">int</span> length, E generator(<span style="color:#66d9ef">int</span> index),
                          {<span style="color:#66d9ef">bool</span> growable <span style="color:#f92672">=</span> <span style="color:#66d9ef">true</span>}) {
    <span style="color:#66d9ef">return</span> RxList(List.generate(length, generator, growable: growable));
  }

  <span style="color:#75715e">/// Creates an unmodifiable list containing all [elements].
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">factory</span> RxList.unmodifiable(Iterable elements) {
    <span style="color:#66d9ef">return</span> RxList(List.unmodifiable(elements));
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  Iterator<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> <span style="color:#66d9ef">get</span> iterator <span style="color:#f92672">=&gt;</span> value.iterator;

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> <span style="color:#66d9ef">operator</span> []<span style="color:#f92672">=</span>(<span style="color:#66d9ef">int</span> index, E val) {
    _value[index] <span style="color:#f92672">=</span> val;
    refresh();
  }

  <span style="color:#75715e">/// Special override to push() element(s) in a reactive way
</span><span style="color:#75715e"></span>  <span style="color:#75715e">/// inside the List,
</span><span style="color:#75715e"></span>  <span style="color:#960050;background-color:#1e0010">@</span>override
  RxList<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> <span style="color:#66d9ef">operator</span> <span style="color:#f92672">+</span>(Iterable<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> val) {
    addAll(val);
    refresh();
    <span style="color:#66d9ef">return</span> <span style="color:#66d9ef">this</span>;
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  E <span style="color:#66d9ef">operator</span> [](<span style="color:#66d9ef">int</span> index) {
    <span style="color:#66d9ef">return</span> value[index];
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> add(E item) {
    _value.add(item);
    refresh();
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> addAll(Iterable<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> item) {
    _value.addAll(item);
    refresh();
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">int</span> <span style="color:#66d9ef">get</span> length <span style="color:#f92672">=&gt;</span> value.length;

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#960050;background-color:#1e0010">@</span>protected
  List<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> <span style="color:#66d9ef">get</span> value {
    RxInterface.proxy<span style="color:#f92672">?</span>.addListener(subject);
    <span style="color:#66d9ef">return</span> _value;
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">set</span> length(<span style="color:#66d9ef">int</span> newLength) {
    _value.length <span style="color:#f92672">=</span> newLength;
    refresh();
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> insertAll(<span style="color:#66d9ef">int</span> index, Iterable<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> iterable) {
    _value.insertAll(index, iterable);
    refresh();
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  Iterable<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> <span style="color:#66d9ef">get</span> reversed <span style="color:#f92672">=&gt;</span> value.reversed;

  <span style="color:#960050;background-color:#1e0010">@</span>override
  Iterable<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> where(<span style="color:#66d9ef">bool</span> Function(E) test) {
    <span style="color:#66d9ef">return</span> value.where(test);
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  Iterable<span style="color:#f92672">&lt;</span>T<span style="color:#f92672">&gt;</span> whereType<span style="color:#f92672">&lt;</span>T<span style="color:#f92672">&gt;</span>() {
    <span style="color:#66d9ef">return</span> value.whereType<span style="color:#f92672">&lt;</span>T<span style="color:#f92672">&gt;</span>();
  }

  <span style="color:#960050;background-color:#1e0010">@</span>override
  <span style="color:#66d9ef">void</span> sort([<span style="color:#66d9ef">int</span> compare(E a, E b)<span style="color:#f92672">?</span>]) {
    _value.sort(compare);
    refresh();
  }
}
</code></pre></div><h2 id="obs源码分析">.obs源码分析</h2>
<p>当我们在调用<code>.obs</code>的时候其实内部的实现源码还是通过<code>RxList&lt;e&gt;(this)</code>进行了一层包装，设计这个主要的目的就是为了方便开发者进行使用</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-dart" data-lang="dart">extension ListExtension<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> on List<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> {
  RxList<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> <span style="color:#66d9ef">get</span> obs <span style="color:#f92672">=&gt;</span> RxList<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span>(<span style="color:#66d9ef">this</span>);

  <span style="color:#75715e">/// Add [item] to [List&lt;E&gt;] only if [item] is not null.
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">void</span> addNonNull(E item) {
    <span style="color:#66d9ef">if</span> (item <span style="color:#f92672">!=</span> <span style="color:#66d9ef">null</span>) add(item);
  }

  <span style="color:#75715e">// /// Add [Iterable&lt;E&gt;] to [List&lt;E&gt;] only if [Iterable&lt;E&gt;] is not null.
</span><span style="color:#75715e"></span>  <span style="color:#75715e">// void addAllNonNull(Iterable&lt;E&gt; item) {
</span><span style="color:#75715e"></span>  <span style="color:#75715e">//   if (item != null) addAll(item);
</span><span style="color:#75715e"></span>  <span style="color:#75715e">// }
</span><span style="color:#75715e"></span>
  <span style="color:#75715e">/// Add [item] to List&lt;E&gt; only if [condition] is true.
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">void</span> addIf(<span style="color:#66d9ef">dynamic</span> condition, E item) {
    <span style="color:#66d9ef">if</span> (condition <span style="color:#66d9ef">is</span> Condition) condition <span style="color:#f92672">=</span> condition();
    <span style="color:#66d9ef">if</span> (condition <span style="color:#66d9ef">is</span> <span style="color:#66d9ef">bool</span> <span style="color:#f92672">&amp;&amp;</span> condition) add(item);
  }

  <span style="color:#75715e">/// Adds [Iterable&lt;E&gt;] to [List&lt;E&gt;] only if [condition] is true.
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">void</span> addAllIf(<span style="color:#66d9ef">dynamic</span> condition, Iterable<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> items) {
    <span style="color:#66d9ef">if</span> (condition <span style="color:#66d9ef">is</span> Condition) condition <span style="color:#f92672">=</span> condition();
    <span style="color:#66d9ef">if</span> (condition <span style="color:#66d9ef">is</span> <span style="color:#66d9ef">bool</span> <span style="color:#f92672">&amp;&amp;</span> condition) addAll(items);
  }

  <span style="color:#75715e">/// Replaces all existing items of this list with [item]
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">void</span> assign(E item) {
    <span style="color:#75715e">// if (this is RxList) {
</span><span style="color:#75715e"></span>    <span style="color:#75715e">//   (this as RxList)._value;
</span><span style="color:#75715e"></span>    <span style="color:#75715e">// }
</span><span style="color:#75715e"></span>
    clear();
    add(item);
  }

  <span style="color:#75715e">/// Replaces all existing items of this list with [items]
</span><span style="color:#75715e"></span>  <span style="color:#66d9ef">void</span> assignAll(Iterable<span style="color:#f92672">&lt;</span>E<span style="color:#f92672">&gt;</span> items) {
    <span style="color:#75715e">// if (this is RxList) {
</span><span style="color:#75715e"></span>    <span style="color:#75715e">//   (this as RxList)._value;
</span><span style="color:#75715e"></span>    <span style="color:#75715e">// }
</span><span style="color:#75715e"></span>    clear();
    addAll(items);
  }
}
</code></pre></div><h2 id="总结-1">总结</h2>
<p>我们对<code>Rx&lt;T&gt;([])</code>、<code>RxList&lt;E&gt;</code>、<code>.obs</code>进行了一个总结，在我们平时的开发过程中建议大家使用<code>.obs</code>即可，因为这是最简单的方式。</p>
        </div>

        
<div class="post-archive">
    <ul class="post-copyright">
        <li><strong>原文作者：</strong><a rel="author" href="https://luckly.work/">luckly</a></li>
        <li style="word-break:break-all"><strong>原文链接：</strong><a href="https://luckly.work/post/flutter_package/getx/">https://luckly.work/post/flutter_package/getx/</a></li>
        <li><strong>版权声明：</strong>本作品采用<a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/">知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议</a>进行许可，非商业转载请注明出处（作者，原文链接），商业转载请联系作者获得授权。</li>
    </ul>
</div>
<br/>



        

<div class="post-archive">
    <h2>See Also</h2>
    <ul class="listing">
        
        <li><a href="/post/flutter_widget/flutter%E7%BB%84%E4%BB%B6FadeTransition/">Flutter组件FadeTransition</a></li>
        
        <li><a href="/post/flutter_package/flutter_swiper/">Flutter_swiper</a></li>
        
        <li><a href="/post/flutter_utils/%E4%BD%BF%E7%94%A8fluttertoast/">使用fluttertoast</a></li>
        
        <li><a href="/post/Flutter/flutter%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F/">Flutter底部导航栏、</a></li>
        
        <li><a href="/post/flutter_package/sliding_up_panel/">Sliding_up_panel</a></li>
        
    </ul>
</div>


        <div class="post-meta meta-tags">
            
            <ul class="clearfix">
                
                <li><a href='/tags/Flutter'>Flutter</a></li>
                
            </ul>
            
        </div>
    </article>
    
    

    
    
    <div class="post bg-white">
      <script src="https://utteranc.es/client.js"
            repo= "https://github.com/ITmxs/repo"
            issue-term="pathname"
            theme="github-light"
            crossorigin="anonymous"
            async>
      </script>
    </div>
    
</div>

                    <footer id="footer">
    <div>
        &copy; 2021 <a href="https://luckly.work/">早起的年轻人 By luckly</a>
        
        | <a rel="nofollow" target="_blank" href="http://beian.miit.gov.cn/">粤ICP备2021号-1</a>
        
    </div>
    <br />
    <div>
        <div class="github-badge">
            <a href="https://juejin.cn/user/3843548384077192" target="_black" rel="nofollow"><span class="badge-subject">Powered by</span><span class="badge-value bg-blue">掘金</span></a>
        </div>
        <div class="github-badge">
            <a href="https://space.bilibili.com/480883651" target="_black"><span class="badge-subject">Design by</span><span class="badge-value bg-brightgreen">早起的年轻人</span></a>
        </div>
        <div class="github-badge">
            <a href="https://cloud.tencent.com/developer/user/6702670" target="_black"><span class="badge-subject">Theme</span><span class="badge-value bg-yellowgreen">云社区</span></a>
        </div>
    </div>
</footer>


    
    <script type="text/javascript">
        window.MathJax = {
            tex2jax: {
                inlineMath: [['$', '$']],
                processEscapes: true
                }
            };
    </script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script><script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

<a id="rocket" href="#top"></a>
<script type="text/javascript" src='/js/totop.js?v=0.0.0' async=""></script>



    <script type="text/javascript" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>




    <script src='/js/douban.js'></script>
    <script src="/js/copy-to-clipboard.js"></script>

                </div>

                <div id="secondary">
    <section class="widget">
        <form id="search" action='https://luckly.work/search/' method="get" accept-charset="utf-8" target="_blank" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
      <input type="hidden" name="sitesearch" value="https://luckly.work/">
      <button type="submit" class="submit icon-search"></button>
</form>
    </section>
    
    <section class="widget">
        <h3 class="widget-title">最近文章</h3>
<ul class="widget-list">
    
    <li>
        <a href="https://luckly.work/post/nginx/nginx%E6%96%87%E4%BB%B6%E5%86%85%E5%AE%B9/" title="Nginx文件内容">Nginx文件内容</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/nginx/nginx%E6%9E%81%E7%AE%80%E6%95%99%E7%A8%8B/" title="Nginx极简教程">Nginx极简教程</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/nginx/%E5%8D%81%E5%88%86%E9%92%9F%E5%85%A5%E9%97%A8nginx/" title="十分钟入门Nginx">十分钟入门Nginx</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/go/Goland%E8%BF%9C%E7%A8%8B%E5%BC%80%E5%8F%91%E9%85%8D%E7%BD%AE/" title="Goland远程开发配置">Goland远程开发配置</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/%E8%AF%BB%E4%B9%A6/%E5%9F%9F%E5%90%8D%E8%A7%A3%E6%9E%90/" title="域名解析">域名解析</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/git/%E6%8F%90%E4%BA%A4%E8%BF%87%E7%A8%8B%E7%9C%81%E7%95%A5%E6%9F%90%E4%BA%9B%E6%96%87%E4%BB%B6/" title="提交过程省略某些文件">提交过程省略某些文件</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/flutter_tips/Flutter_DropdownButton%E7%A4%BA%E4%BE%8B/" title="Flutter_DropdownButton示例">Flutter_DropdownButton示例</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/flutter_tips/Flutter_ExpansionPanelList%E5%92%8CExpansionPanelList.radio%E7%A4%BA%E4%BE%8B/" title="Flutter_ExpansionPanelList和ExpansionPanelList">Flutter_ExpansionPanelList和ExpansionPanelList</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/flutter_tips/Flutter%E5%BE%AE%E4%BF%A1%E5%88%86%E4%BA%AB%E9%93%BE%E6%8E%A5%E8%B7%B3%E5%9B%9EApp%E6%8C%87%E5%AE%9A%E9%A1%B5%E9%9D%A2/" title="Flutter微信分享链接跳回App指定页面">Flutter微信分享链接跳回App指定页面</a>
    </li>
    
    <li>
        <a href="https://luckly.work/post/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F/%E5%A4%96%E5%8C%85%E5%8F%AF%E8%83%BD%E7%9A%84%E9%97%AE%E9%A2%98/" title="外包可能的问题">外包可能的问题</a>
    </li>
    
</ul>
    </section>

    

    <section class="widget">
        <h3 class="widget-title"><a href='/categories/'>分类</a></h3>
<ul class="widget-list">
    
    <li><a href="https://luckly.work/categories/Flutter/">Flutter (326)</a></li>
    
    <li><a href="https://luckly.work/categories/IT/">IT (2)</a></li>
    
    <li><a href="https://luckly.work/categories/Kotlin/">Kotlin (2)</a></li>
    
    <li><a href="https://luckly.work/categories/Mysql/">Mysql (1)</a></li>
    
    <li><a href="https://luckly.work/categories/nginx/">nginx (1)</a></li>
    
    <li><a href="https://luckly.work/categories/Vue/">Vue (6)</a></li>
    
    <li><a href="https://luckly.work/categories/YouTube%E8%A7%86%E9%A2%91%E4%B8%8B%E8%BD%BD/">YouTube视频下载 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/android/">android (6)</a></li>
    
    <li><a href="https://luckly.work/categories/dart/">dart (96)</a></li>
    
    <li><a href="https://luckly.work/categories/Flutter/">Flutter (28)</a></li>
    
    <li><a href="https://luckly.work/categories/gin/">gin (25)</a></li>
    
    <li><a href="https://luckly.work/categories/git/">git (4)</a></li>
    
    <li><a href="https://luckly.work/categories/Go/">Go (102)</a></li>
    
    <li><a href="https://luckly.work/categories/gorm/">gorm (4)</a></li>
    
    <li><a href="https://luckly.work/categories/grpc/">grpc (1)</a></li>
    
    <li><a href="https://luckly.work/categories/html/">html (3)</a></li>
    
    <li><a href="https://luckly.work/categories/ios/">ios (1)</a></li>
    
    <li><a href="https://luckly.work/categories/linux/">linux (1)</a></li>
    
    <li><a href="https://luckly.work/categories/nginx/">nginx (6)</a></li>
    
    <li><a href="https://luckly.work/categories/python/">python (35)</a></li>
    
    <li><a href="https://luckly.work/categories/read/">读书笔记 (6)</a></li>
    
    <li><a href="https://luckly.work/categories/redis/">redis (2)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99/">个人资料 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%B9%A6%E5%8D%95/">书单 (8)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%B9%A6%E8%AF%84/">书评 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统管理师 (19)</a></li>
    
    <li><a href="https://luckly.work/categories/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统项目管理师 (25)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%8E%9F%E5%88%99/">原则 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF/">原生通讯 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%9F%BA%E7%A1%80/">基础 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%A4%8D%E5%88%A9%E6%95%88%E5%BA%94/">复利效应 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%AE%89%E8%A3%85%E6%95%99%E7%A8%8B/">安装教程 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%B0%91%E6%9C%89%E4%BA%BA%E8%B5%B0%E7%9A%84%E8%B7%AF/">少有人走的路 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E5%BF%83%E8%AF%AD/">心语 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E6%8F%92%E4%BB%B6/">插件 (2)</a></li>
    
    <li><a href="https://luckly.work/categories/%E6%95%99%E5%AD%A6/">教学 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%8E%8B%E9%98%B3%E6%98%8E/">王阳明 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%94%B5%E5%AD%90%E4%B9%A6/">电子书 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%99%BB%E9%99%86%E8%A1%A8%E5%8D%95/">登陆表单 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%A8%BB%E7%9B%9B%E5%92%8C%E5%A4%AB/">稻盛和夫 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%A9%B7%E7%88%B8%E7%88%B8%E5%AF%8C%E7%88%B8%E7%88%B8/">穷爸爸富爸爸 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%B2%BE%E8%BF%9B/">精进 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E7%BC%96%E7%A8%8B/">编程 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%99%9A%E5%B9%BB/">虚幻 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B4%A2%E5%8A%A1%E8%87%AA%E7%94%B1%E4%B9%8B%E8%B7%AF/">财务自由之路 (2)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B7%91%E6%AD%A5/">跑步 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82/">路由传参 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%B7%AF%E7%BA%BF/">路线 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E8%BD%AF%E4%BB%B6%E5%AE%9E%E6%96%BD/">软件实施 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E9%98%B3%E6%98%8E%E5%BF%83%E5%AD%A6/">阳明心学 (3)</a></li>
    
    <li><a href="https://luckly.work/categories/%E9%A1%B9%E7%9B%AE/">项目 (1)</a></li>
    
    <li><a href="https://luckly.work/categories/%E9%AD%85%E5%8A%9B/">魅力 (1)</a></li>
    
</ul>
    </section>

    <section class="widget">
        <h3 class="widget-title"><a href='/tags/'>标签</a></h3>
<div class="tagcloud">
    
    <a href="https://luckly.work/tags/flutter/">flutter</a>
    
    <a href="https://luckly.work/tags/IT/">IT</a>
    
    <a href="https://luckly.work/tags/Kotlin/">Kotlin</a>
    
    <a href="https://luckly.work/tags/Mysql/">Mysql</a>
    
    <a href="https://luckly.work/tags/nginx/">nginx</a>
    
    <a href="https://luckly.work/tags/Vue/">Vue</a>
    
    <a href="https://luckly.work/tags/YouTube%E8%A7%86%E9%A2%91%E4%B8%8B%E8%BD%BD/">YouTube视频下载</a>
    
    <a href="https://luckly.work/tags/android/">android</a>
    
    <a href="https://luckly.work/tags/dart/">dart</a>
    
    <a href="https://luckly.work/tags/flutter/">flutter</a>
    
    <a href="https://luckly.work/tags/gin/">gin</a>
    
    <a href="https://luckly.work/tags/git/">git</a>
    
    <a href="https://luckly.work/tags/go/">go</a>
    
    <a href="https://luckly.work/tags/gorm/">gorm</a>
    
    <a href="https://luckly.work/tags/grpc/">grpc</a>
    
    <a href="https://luckly.work/tags/html/">html</a>
    
    <a href="https://luckly.work/tags/ios/">ios</a>
    
    <a href="https://luckly.work/tags/linux/">linux</a>
    
    <a href="https://luckly.work/tags/nginx/">nginx</a>
    
    <a href="https://luckly.work/tags/python/">python</a>
    
    <a href="https://luckly.work/tags/redis/">redis</a>
    
    <a href="https://luckly.work/tags/%E4%B8%AA%E4%BA%BA%E8%B5%84%E6%96%99/">个人资料</a>
    
    <a href="https://luckly.work/tags/%E4%B9%A6%E5%8D%95/">书单</a>
    
    <a href="https://luckly.work/tags/%E4%B9%A6%E8%AF%84/">书评</a>
    
    <a href="https://luckly.work/tags/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统管理师</a>
    
    <a href="https://luckly.work/tags/%E4%BF%A1%E6%81%AF%E7%B3%BB%E7%BB%9F%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86%E5%B8%88/">信息系统项目管理师</a>
    
    <a href="https://luckly.work/tags/%E5%85%A5%E9%97%A8/">入门</a>
    
    <a href="https://luckly.work/tags/%E5%8E%9F%E5%88%99/">原则</a>
    
    <a href="https://luckly.work/tags/%E5%8E%9F%E7%94%9F%E9%80%9A%E8%AE%AF/">原生通讯</a>
    
    <a href="https://luckly.work/tags/%E5%9F%BA%E7%A1%80/">基础</a>
    
    <a href="https://luckly.work/tags/%E5%A4%8D%E5%88%A9%E6%95%88%E5%BA%94/">复利效应</a>
    
    <a href="https://luckly.work/tags/%E5%AE%89%E8%A3%85%E6%95%99%E7%A8%8B/">安装教程</a>
    
    <a href="https://luckly.work/tags/%E5%B0%91%E6%9C%89%E4%BA%BA%E8%B5%B0%E7%9A%84%E8%B7%AF/">少有人走的路</a>
    
    <a href="https://luckly.work/tags/%E5%BF%83%E8%AF%AD/">心语</a>
    
    <a href="https://luckly.work/tags/%E6%8F%92%E4%BB%B6/">插件</a>
    
    <a href="https://luckly.work/tags/%E6%95%99%E5%AD%A6/">教学</a>
    
    <a href="https://luckly.work/tags/%E7%8E%8B%E9%98%B3%E6%98%8E/">王阳明</a>
    
    <a href="https://luckly.work/tags/%E7%94%B5%E5%AD%90%E4%B9%A6/">电子书</a>
    
    <a href="https://luckly.work/tags/%E7%99%BB%E9%99%86%E8%A1%A8%E5%8D%95/">登陆表单</a>
    
    <a href="https://luckly.work/tags/%E7%A8%BB%E7%9B%9B%E5%92%8C%E5%A4%AB/">稻盛和夫</a>
    
    <a href="https://luckly.work/tags/%E7%A9%B7%E7%88%B8%E7%88%B8%E5%AF%8C%E7%88%B8%E7%88%B8/">穷爸爸富爸爸</a>
    
    <a href="https://luckly.work/tags/%E7%B2%BE%E8%BF%9B/">精进</a>
    
    <a href="https://luckly.work/tags/%E7%BC%96%E7%A8%8B/">编程</a>
    
    <a href="https://luckly.work/tags/%E8%99%9A%E5%B9%BB/">虚幻</a>
    
    <a href="https://luckly.work/tags/%E8%AF%97/">诗</a>
    
    <a href="https://luckly.work/tags/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/">读书笔记</a>
    
    <a href="https://luckly.work/tags/%E8%B4%A2%E5%8A%A1%E8%87%AA%E7%94%B1%E4%B9%8B%E8%B7%AF/">财务自由之路</a>
    
    <a href="https://luckly.work/tags/%E8%B7%91%E6%AD%A5/">跑步</a>
    
    <a href="https://luckly.work/tags/%E8%B7%AF%E7%94%B1%E4%BC%A0%E5%8F%82/">路由传参</a>
    
    <a href="https://luckly.work/tags/%E8%B7%AF%E7%BA%BF/">路线</a>
    
    <a href="https://luckly.work/tags/%E8%BD%AF%E4%BB%B6%E5%AE%9E%E6%96%BD/">软件实施</a>
    
    <a href="https://luckly.work/tags/%E9%80%9A%E8%AE%AF%E5%BD%95/">通讯录</a>
    
    <a href="https://luckly.work/tags/%E9%98%B3%E6%98%8E%E5%BF%83%E5%AD%A6/">阳明心学</a>
    
    <a href="https://luckly.work/tags/%E9%A1%B9%E7%9B%AE/">项目</a>
    
    <a href="https://luckly.work/tags/%E9%AD%85%E5%8A%9B/">魅力</a>
    
</div>
    </section>

    
<section class="widget">
    <h3 class="widget-title">友情链接</h3>
    <ul class="widget-list">
        
        <li>
            <a target="_blank" href="http://www.topgoer.com/" title="枯藤">枯藤</a>
        </li>
        
        <li>
            <a target="_blank" href="https://gorm.cn/zh_CN/docs/index.html" title="gorm">gorm</a>
        </li>
        
        <li>
            <a target="_blank" href="https://docs.python.org/zh-cn/3/tutorial/index.html" title="python">python</a>
        </li>
        
        <li>
            <a target="_blank" href="https://www.liwenzhou.com/" title="李文周">李文周的博客</a>
        </li>
        
        <li>
            <a target="_blank" href="http://www.xbzweb.com/" title="小包子的博客">小包子的博客</a>
        </li>
        
        <li>
            <a target="_blank" href="https://www.flysnow.org/" title="飞雪无情的博客">飞雪无情的博客</a>
        </li>
        
        <li>
            <a target="_blank" href="https://sliverhorn.com/" title="sliverhorn的博客">sliverhorn的博客</a>
        </li>
        
        <li>
            <a target="_blank" href="http://yuedu.baidu.com/ebook/14a722970740be1e640e9a3e" title="Android Gradle权威指南">Android Gradle权威指南</a>
        </li>
        
        <li>
            <a target="_blank" href="https://gesdh.cn/" title="小格子">格子导航</a>
        </li>
        
        <li>
            <a target="_blank" href="https://itachi.xyz/" title="阿林">itachi&#39;s Blog</a>
        </li>
        
        <li>
            <a target="_blank" href="https://darjun.github.io/" title="大俊">大俊Blog</a>
        </li>
        
        <li>
            <a target="_blank" href="https://geektutu.com/post/quick-golang.html" title="极客兔兔">极客兔兔Blog</a>
        </li>
        
        <li>
            <a target="_blank" href="http://zxfcumtcs.github.io/" title="赵雪峰">雪峰Blog</a>
        </li>
        
    </ul>
</section>


    <section class="widget">
        <h3 class="widget-title">其它</h3>
        <ul class="widget-list">
            <li><a href="https://luckly.work/index.xml">文章 RSS</a></li>
        </ul>
    </section>
</div>
            </div>
        </div>
    </div>
</body>

</html>